<template>
  <div class="service">
    <z-header :selectNumber="selectNumber"></z-header>
    <z-navigation :numId="bannerId"></z-navigation>
    <z-service-content :servieId="servieId"></z-service-content>
    <z-footer></z-footer>
  </div>
</template>
<script>
import ZHeader from '../pages/header';
import ZNavigation from '../pages/navigation';
import ZFooter from '../pages/footer';
import ZServiceContent from './serviceContent'
export default {
  components: { ZHeader, ZFooter, ZNavigation, ZServiceContent },
  data() {
    return {
      selectNumber: '2-0',
      servieId: {},
      bannerId: 2
    }
  },
  mounted() {
    console.log(this.$route.query.key);
    this.servieId = this.$route.query;
    this.selectNumber = this.$route.query.key;
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
  },
  watch: {
    $route(to, from) {
      this.servieId = to.query;
    }
  }
};
</script>'
<style scoped>
.service {
  width: 100%;
  position: absolute;
  background-color: #fff;
}
</style>

